<template>
  <div class="product-inventory-container">
    <h1>产品库存</h1>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>库存数量</th>
          <th>仓库位置</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="inventory in paginatedInventories" :key="inventory.code">
          <td>{{ inventory.code }}</td>
          <td>{{ inventory.name }}</td>
          <td>{{ inventory.quantity }}</td>
          <td>{{ inventory.location }}</td>
        </tr>
      </tbody>
    </table>
    <div class="pagination">
      <button v-for="page in totalPages" :key="page" @click="goToPage(page)">{{ page }}</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductInventory',
  data() {
    return {
      inventories: [
        { code: '001', name: '衬衫', quantity: 100, location: 'A1' },
        { code: '002', name: '裤子', quantity: 150, location: 'B2' },
        { code: '003', name: '鞋子', quantity: 200, location: 'C3' },
        { code: '004', name: '帽子', quantity: 80, location: 'D4' },
        { code: '005', name: '手表', quantity: 50, location: 'E5' },
        { code: '006', name: '手机', quantity: 30, location: 'F6' },
        { code: '007', name: '电脑', quantity: 20, location: 'G7' },
        { code: '008', name: '平板', quantity: 40, location: 'H8' },
        { code: '009', name: '耳机', quantity: 60, location: 'I9' },
        { code: '010', name: '电视', quantity: 25, location: 'J10' },
        { code: '011', name: '冰箱', quantity: 15, location: 'K11' },
        { code: '012', name: '洗衣机', quantity: 10, location: 'L12' },
        { code: '013', name: '空调', quantity: 18, location: 'M13' },
        { code: '014', name: '微波炉', quantity: 22, location: 'N14' },
        { code: '015', name: '电饭煲', quantity: 35, location: 'O15' },
        { code: '016', name: '吸尘器', quantity: 28, location: 'P16' },
        { code: '017', name: '热水器', quantity: 12, location: 'Q17' },
        { code: '018', name: '电风扇', quantity: 45, location: 'R18' },
        { code: '019', name: '灯具', quantity: 55, location: 'S19' },
        { code: '020', name: '沙发', quantity: 5, location: 'T20' }
      ],
      currentPage: 1,
      itemsPerPage: 10,
      totalPages: 4
    };
  },
  computed: {
    paginatedInventories() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.inventories.slice(start, end);
    }
  },
  methods: {
    goToPage(page) {
      this.currentPage = page;
    }
  }
}
</script>

<style scoped>
.product-inventory-container {
  padding: 20px;
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 18px;
  background-color: #f9f9f9; /* 表格背景色 */
}

th {
  background-color: #4CAF50; /* 表头背景色 */
  color: white; /* 表头文字颜色 */
  padding: 10px;
}

td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

tr:nth-child(even) {
  background-color: #f2f2f2; /* 偶数行背景色 */
}

tr:hover {
  background-color: #ddd; /* 悬停效果 */
}

.pagination {
  margin-top: 10px;
}

.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  background-color: #4CAF50; /* 按钮背景色 */
  color: white; /* 按钮文字颜色 */
  border: none;
  cursor: pointer;
}

.pagination button:hover {
  background-color: #45a049; /* 按钮悬停效果 */
}
</style>